<template>
  <div class="wrap mt-3">
    <div class="main-content">
      <div class="container">
        <div class="links-box p-3" >
          <div class="links-card" v-for="(links, index) in goodsprice">
            <div class="links-card-border">
              <a :href="links.spUrl" target="_blank" class="thumbnail-wrap">
                <img :src="links.spPic" class="thumbnail" alt="">
              </a>
              <div class="links-title">{{links.siteName}}</div>
              <div class="links-title2">{{links.spName}}</div>
              <div class="links-title3 danger">
                <el-tooltip class="item" effect="dark" :content="links.lowerDate" placement="top">
                  <el-tag type="danger" size="small">最低</el-tag>
                </el-tooltip>
                <el-divider direction="vertical"></el-divider>￥{{links.lowerPrice}}
              </div>
              <div class="links-title3 primary">
                <el-tag size="small">当前</el-tag><el-divider direction="vertical"></el-divider>￥{{links.currentPrice}}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <app-sidebar class="sidebar-wrap" />
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import AppSidebar from '@/components/AppSidebar'
  export default {
    name: 'Details',
    async fetch ({ params, error, store }) {
     return store.dispatch('article/getpricepage',{id:'65',})
    },
    components: {
      AppSidebar
    },
    data () {
      return {

      }
    },
    computed: {
      ...mapState(['info']),
      ...mapState('article', ['goodsprice','goodsarr'])
    },
    head () {
      return {
        title: `归档 - ${this.info.blog_title}`,
        meta: [
          { hid: 'keywords', name: 'keywords', content: this.info.seo_keywords },
          { hid: 'description', name: 'description', content: this.info.seo_description }
        ],
        style: [

        ]
      }
    },
    created () {


    },
    mounted () {



    },
    beforeDestroy () {


    },
    methods: {




    }
  }
</script>
<style lang="scss" scoped>
  .links-box{
    color: #999;
    background: #fff;
    display: flex;
    flex-wrap:wrap;
    min-height: 80vh;
    align-content: flex-start;
    .links-card{
      width: 33.3%;
      min-width: 33.3%;
      max-width: 33.3%;
      padding: 0.5rem;
      flex: 1;
      box-sizing: border-box;
      .links-card-border{
        border: 1px solid $color-border;
        border-radius: $border-radius;
      }
    }
    .links-title{
      padding: 0.3rem;
      text-align: center;
      @include ellipsisMultiline(1, 2);
    }
    .links-title2{
      padding: 0.3rem;
      text-align: center;
      font-weight: 600;
      color: $color-text2;
      @include ellipsisMultiline(2, 2);
    }
    .links-title3{
      padding: 0.3rem;
      text-align: center;
      font-size: 1rem;
      .el-tag{
        font-size: 1rem;
      }
    }
    .danger{
      color: #f56c6c;
    }
    .primary{
      color: #409EFF;
    }
  }

  .thumbnail-wrap{
    display: block;
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 4px;
    .thumbnail{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
    }
  }
  @media screen and (max-width:767px) {
    .links-box{
      .links-card{
        width: 50%;
        min-width: 50%;
        max-width: 50%;
      }
    }
    .thumbnail-wrap{
      height: 90px;
    }
  }
</style>
